<template lang="pug">
  kalix-dialog.user-add(title='批阅' bizKey="overread" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL")
    div.el-form(slot="dialogFormSlot")
      el-form-item(label="题干" prop="stem" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.stem" readonly)
      el-form-item(label="评分标准" prop="scoreStandard" v-bind:label-width="labelWidth")
        el-input(type="textarea" v-model="formModel.scoreStandard" v-bind:rows="3" readonly)
      el-form-item(label="满分" prop="perScore" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.perScore" readonly)
      el-form-item(label="考生" prop="userName" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.userName" readonly)
      el-form-item(label="考生答案" prop="answerPicPath" v-bind:label-width="labelWidth")
        <!--el-input(type="textarea" v-model="formModel.answer" v-bind:rows="3" readonly)-->
        div.avatar(v-bind:style="{'background-image': 'url('+formModel.answerPicPath+')'}" v-on:click="handlerClickAvatar(formModel.answerPicPath)")
      el-form-item(label="打分" prop="score" v-bind:label-width="labelWidth")
        el-input-number(v-model="formModel.score" v-bind:min="0" :max="formModel.perScore")
</template>

<script type="text/ecmascript-6">
  import FormModel from './overReadModel'
  import {OverReadScoreURL} from '../config.toml'

  export default {
    name: "OverReadEdit",
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        labelWidth: '140px',
        targetURL: OverReadScoreURL
      }
    },
    methods: {
      handlerClickAvatar(item) {
        this.$KalixDialogImgPreview({
          imgs: [item],
          selectItem: item
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .avatar
    width 100px
    height 100px
    background 50% 50% no-repeat
    background-size cover
    cursor pointer
    &:hover
      box-shadow 3px 3px 10px #000
</style>
